<template>
  <div class="registered-container directManagementSetup appMainWarp">
    <!-- <Header /> -->
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="用户名:">
        <el-input v-model="searchKey.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input v-model="searchKey.phone" placeholder="手机号码" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
          v-model="searchKey.usertype"
          placeholder="请选择用户类型"
          @change="getObjectCode()"
          filterable
        >
          <el-option label="平台系统用户" :value="0" />
          <el-option label="代理商" :value="1" />
          <el-option label="学校管理员" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onLoad()"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="addInfo"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <template>
      <el-table
        ref="table"
        v-loading="page.tableLoading"
        center
        class="table"
        :data="searchData"
        stripe
        border
      >
        <el-table-column label="角色名称" align="center">
          <template slot-scope="scope">{{
            scope.row.Rolename || "-"
          }}</template>
        </el-table-column>
        <el-table-column label="角色类型" align="center">
          <template slot-scope="scope">
            {{ getRoleType(scope.row.Roletype) || "-" }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="props">
            <el-button type="success" size="small" round  @click="editInfo(props.row)">修 改</el-button>
            <el-button type="danger" size="small" round  @click="deleteInfo(props.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.pageindex"
      :limit.sync="page.pageSize"
      @pagination="onSearch"
    />
    <!-- 添加 修改 信息的弹框 -->
    <BaseDialog :title="!addModel.item.Roleid ? '新增' : '修改'" :visible="addModel.flag" @close="close" width="750">
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display: flex">
          <el-form-item label="角色名称:" required>
            <el-input
              v-model="addModel.item.Rolename"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <el-form-item label="手机号:" required>
            <el-input
              v-model="addModel.item.Phone"
              placeholder="请输入手机号"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="角色编码" required>
            <el-select

              v-model="addModel.item.Roleid"
              placeholder="请选择"
              filterable
            >
              <template v-for="(item, index) in roles">
                <el-option
                  :label="item.Rolename"
                  :value="item.Roleid"
                  :key="index"
                />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="登录账号:" required>
            <el-input
              v-model="addModel.item.LoginAcct"
              placeholder="请输入登录账号"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="用户状态" required>
            <el-select
              v-model="addModel.item.Status"
              placeholder="请选择用户状态"
            >
              <el-option label="禁用" :value="0" />
              <el-option label="启用" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="登录密码:" required>
            <el-input
              v-model="addModel.item.Loginpwd"
              placeholder="请输入登录密码"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="用户类型" required>
            <el-select
              v-model="addModel.item.Usertype"
              placeholder="请选择用户类型"
              @change="getObjectCode()"
              filterable
            >
              <el-option label="平台系统用户" :value="0" />
              <el-option label="代理商" :value="1" />
              <el-option label="学校管理员" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="addModel.item.Usertype != 0"
            :label="addModel.item.Usertype == 1 ? '代理商编码' : '学校编码'"
            required
          >
            <el-select
              v-model="addModel.item.Objectcode"
              placeholder="请选择"
              v-if="addModel.item.Usertype != 0"
            >
              <template v-for="(item, index) in objectCode">
                <el-option
                  :label="
                    addModel.item.Usertype == 1
                      ? item.agentname
                      : item.schoolname
                  "
                  :value="
                    addModel.item.Usertype == 1 ? item.agentid : item.schoolid
                  "
                  :key="index"
                />
              </template>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </BaseDialog>
    <!-- 添加 修改 信息的弹框 -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { getschoollist } from "@/api/systemManagement/userManagement/index";
import { getTableData, getMessage, isPhone } from "@/utils/pageUtil";
import { getRolelist,deluser } from "@/api/systemManagement/roleManagement";
import { getagentlist } from "@/api/basicInfo/index";

const defaultAddItem = {
  Username: "",
  Usertype: 0,
  Phone: "",
  LoginAcct: "",
  Loginpwd: "",
  Roleid: "",
  Status: 1,
  Objectcode: undefined,
};

export default {
  name: "RoleManagement",
  components: {
    Pagination,
  },
  data() {
    return {
      searchKey: {
        username: "",
        usertype: 0,
        phone: "",
      },
      page: {
        tableLoading: false,
        pageindex: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0, // 总页数
      },
      searchData: [],
      roles: [],
      objectCode: [],
      addModel: {
        flag: false,
        rolesAll: [],
        item: defaultAddItem,
      },
    };
  },
  created() {},
  mounted() {
    this.onLoad();
    this.getrolelist();
    this.getObjectCode();
  },
  methods: {
    addInfo() {
      this.addModel.item.id = "";
      this.addModel.item = Object.assign({}, defaultAddItem);
      this.addModel.flag = true;
    },
    editInfo(row) {
      this.addModel.flag = true;
      this.addModel.item = Object.assign({}, row);
    },
    async deleteInfo(item) {
      this.$confirm("确定要删除此角色吗？删除后不可恢复！", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deluser({ Userid: item.Userid, Loginacc: item.LoginAcct })
            .then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
              this.onLoad();
            })
            .catch((error) => [
              this.$message({
                type: "warning",
                message: "删除失败",
              }),
            ]);
        })
        .catch(() => {});
    },
    onLoad() {
      this.page.pageindex = 1;
      this.page.pagesize = 10;
      this.onSearch();
    },
    async onSearch() {
      this.page.tableLoading = true
      // const loginInit = this.$loading();
      let params = Object.assign(this.page, this.searchKey);
      const tableData = await getTableData(getRolelist, params);
      if (tableData) {
        this.page.tableLoading = false
        const { datalist, totalcount } = tableData.data.data;
        this.searchData = datalist;
        this.page.totalRow = totalcount;
      }
    },
    getRoleType(roleType) {
      //系统平台用户-1 代理商管理员-2 学校管理员-3 代理商一般用户-4 学校一般用户-5 超级管理员-6
      switch (roleType) {
        case 0:
          return "所有";
        case 1:
          return "系统平台";
        case 2:
          return "代理商";
        case 3:
          return "学校";
        default:
          return "暂无";
      }
    },
    async getObjectCode() {
      await this.getOptions();
    },
    async getOptions() {
      this.objectCode = [];
      //供应商的数据
      if (this.addModel.item.Usertype == 1) {
        let params = Object.assign({ pageindex: 1, pagesize: 1000 }, "");
        this.objectCode = (
          await getTableData(getagentlist, params)
        ).data.data.datalist;
      } else {
        //学校编码的数据
        let params = Object.assign(this.page, "");
        this.objectCode = (
          await getTableData(getschoollist, params)
        ).data.data.datalist;
      }
    },
    async getrolelist() {
      let params = Object.assign(this.page, "");
      const tableData = await getTableData(getrolelist, params);
      if (tableData && tableData.data && tableData.data.data) {
        this.roles = tableData.data.data.datalist;
      } else {
        this.roles = [];
      }
    },
    close() {
      this.addModel.flag = false;
    },
    async submitArea() {
      /**验证*/
      if (!this.addModel.item.Username) {
        getMessage(this, "用户名不能为空!");
      } else if (!this.addModel.item.Phone) {
        getMessage(this, "手机号不能为空!");
      } else if (!isPhone(this.addModel.item.Phone)) {
        getMessage(this, "手机号格式不正确!");
      } else if (!this.addModel.item.Roleid) {
        getMessage(this, "角色编码不能为空!");
      } else if (!this.addModel.item.LoginAcct) {
        getMessage(this, "登录账号不能为空!");
      } else if (!this.addModel.item.Loginpwd) {
        getMessage(this, "登录密码不能为空!");
      } else {
        let loginInit = this.$loading();
        const result = await adduser(this.addModel.item);
        if (result.data.code == 0) {
          getMessage(
            this,
            this.addModel.item.id ? "添加成功!" : "修改成功!",
            "success"
          );
          loginInit.close();
          this.close();
          this.onLoad();
        } else {
          getMessage(this, result.data.msg);
          loginInit.close();
        }
      }
    },
  },
};
</script>

<style scoped>
.el-input {
    width: 200px;
}
.el-table .el-button {
    display: inline-block;
    margin: 0 10px;
}
</style>